<template>
  <div>
    <a-layout>
      <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
      >
      <p>
        <a-form layout="inline" :model="param">
          <a-form-item>
            <a-input v-model:value="param.name" placeholder="名称">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleQuery({page: 1, size: pagination.pageSize})">
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="add()">
              新增
            </a-button>
          </a-form-item>
        </a-form>
      </p>


        <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="ebooks"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
        >
        <template #bodyCell="{ column,record}">
        <template v-if="column.dataIndex === 'cover'">
            <a-image   :src="record.cover" alt="图片加载失败" style="width:80px;height:80px"/>
        </template>
        <template v-else-if="column.dataIndex === 'action'">
            <a-space size="small">
              <a-button type="primary"  @click="edit(record)">
                编辑
              </a-button>
             <a-popconfirm
                title="删除后不可以恢复，确认删除?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDelete(record.id)"
             >
               <a-button type="danger" >
                 删除
               </a-button>
             </a-popconfirm>
            </a-space>
          </template>
        </template>
        </a-table>
  
      </a-layout-content>
    </a-layout>


    <a-modal
      title="电子书表单"
      v-model:visible="modalVisible"
      :confirm-loading="modalLoading"
      @ok="handleModalOk"
  >
    <a-form :model="ebook" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="封面">
          <a-input v-model:value="ebook.cover" />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="ebook.name" />
      </a-form-item>
      <a-form-item label="分类一">
        <a-input v-model:value="ebook.category1Id" />
      </a-form-item>
      <a-form-item label="分类二">
        <a-input v-model:value="ebook.category2Id" />
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea v-model:value="ebook.description" type="textarea" />
      </a-form-item>
    </a-form>
  </a-modal>
</div>
</template>
  <script lang="ts" setup>
  import axios from 'axios';
  import { ref, onMounted } from 'vue';
  import { Tool } from "@/utils/tool.ts";
  
      const ebooks = ref();//定义查询电子书返回集合
      const param = ref();
      param.value = {};
        //定义分页参数
      const pagination = ref({   
        current: 1,
        pageSize: 2,
        total: 0
      });
      const loading = ref(false);
      const columns = [
      {
          title: 'id',
          key:'id',
          dataIndex: 'id', 
         
        },
        {
          title: '封面',
          key:'cover',
          dataIndex: 'cover',
         
        },
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '分类一',
          key: 'category1Id',
          dataIndex: 'category1Id'
        },
        {
          title: '分类二',
          dataIndex: 'category2Id'
        },
        {
          title: '文档数',
          dataIndex: 'docCount'
        },
        {
          title: '阅读数',
          dataIndex: 'viewCount'
        },
        {
          title: '点赞数',
          dataIndex: 'voteCount'
        },
        {
          title: 'Action',
          key: 'action',
          dataIndex:'action'
          
        }
      ];
        
      onMounted(() => {
        handleQuery({
            page: 1,
            size: pagination.value.pageSize
        });
      })
      /*
      * 数据查询
      * */
      const  handleQuery = (params:any)=>{
        loading.value = true;
        axios.get("/ebook/list",{
        params:{
            page:params.page,
            size:params.size,
            name:param.value.name
        }}).then((resp)=>{
            loading.value = false;
            const  data = resp.data;
            if (data.success){
                ebooks.value = data.content.list;

                //重置分页按钮
                pagination.value.current = params.page;
                pagination.value.total = data.content.total;
            }
        });
      };
      /*
      * 表格点击页码时触发
      * */
      const handleTableChange =(pagination:any)=>{
        console.log("看看自带分页的参数都有些啥："+pagination);
        handleQuery({
          page:pagination.current,
          size:pagination.pageSize
        });
      };

      // 编辑相关功能
      const ebook = ref();
      const modalVisible = ref(false);
      const modalLoading = ref(false);
      //编辑
      const edit = (record:any)=>{
        modalVisible.value =true;
        ebook.value = Tool.copy(record);
      }
     //新增
     const add = ()=>{
      modalVisible.value =true;
      ebook.value = {};

    }


    //删除
    const handleDelete = (id:bigint)=>{
      console.log("id:",id)
      axios.delete('/ebook/delete/'+id).then((resp)=>{
        if (resp.data.success){
          //重新加载列表
          handleQuery({
            page:pagination.value.current,
            size:pagination.value.pageSize
          });
        }
      })
    }

      const handleModalOk = ()=>{
        modalLoading.value = true;
        axios.post("/ebook/save",ebook.value).then(resp =>{
          //回去返回参数
          const data = resp.data;
          if(data.success){
            modalLoading.value = false;//关闭等待
            modalVisible.value = false;//关闭对话框
            //重新加载列表
            handleQuery({
              page:pagination.value.current,
              size:pagination.value.pageSize
            })
          }
        })
      }
  </script>
  <style scoped>

  </style>